<template>
  <div class="sidebar">
    <SideBarItem link="/home">
      <div>发现音乐</div>
    </SideBarItem>
    <SideBarItem link="/videoPage">
      <div>视频</div>
    </SideBarItem>
    <SideBarItem @click.native="enterClick" :link="'/myCollect/id=' + userId">
      <div>我的收藏</div>
    </SideBarItem>
    <SideBarItem @click.native="enterClick" :link="'/dailyRecommend/id=' + userId">
      <div>每日推荐</div>
    </SideBarItem>
<!--创建的歌单-->
    <div style="position: relative;width: 90px" @click="creatListClick">
      <p style="margin: 20px 0 5px 5px" v-if="createList !== null">创建的歌单</p>
      <i class="bottom_tri" v-show="!createVisible"></i>
      <i class="right_tri" v-show="createVisible"></i>
    </div>
    <SideBarItem v-if="userId && !createVisible"
                 v-for="(item) in createList"
                :key="item.id"
                :link="'/songlist/detail/id='+item.id+'/songlist'"
                 style="font-size: 12px;
                        padding-left: 5px;
                        padding-right: 10px;">
      <div style="overflow: hidden;
                  text-overflow:ellipsis;
                  white-space: nowrap;">
        <img style="position: relative;top: 2px" src="~@/assets/img/music.svg" alt="">
        {{ item.name }}
      </div>
    </SideBarItem>
    <!--      收藏的歌单-->
    <div style="position: relative;width: 90px" @click="subListClick">
      <p style="margin: 15px 0 5px 5px" v-if="subList !== null">收藏的歌单</p>
      <i class="bottom_tri" v-show="!subVisible"></i>
      <i class="right_tri" v-show="subVisible"></i>
    </div>
    <SideBarItem v-if="userId && !subVisible"
                 v-for="(item) in subList"
                :key="item.id"
                :link="'/songlist/detail/id='+item.id+'/songlist'"
                 style="font-size: 12px;
                        padding-left: 5px;
                        padding-right: 10px;">
      <div style="overflow: hidden;
                  text-overflow:ellipsis;
                  white-space: nowrap;">
        <img style="position: relative;top: 2px" src="~@/assets/img/music.svg" alt="">
        {{ item.name }}
      </div>
    </SideBarItem>
  </div>
</template>

<script>
  import SideBarItem from "./SideBarItem";
  import {home} from "@/network/home";

  export default {
    name: "SideBar",
    components:{
      SideBarItem,
    },
    data(){
      return {
        //注意给userId赋值时要注意userInfo是否为null,如果为null则不能找到userInfo的useId,
        //因为我们不能从null里面再找下一层数据
        userId:this.$store.state.userInfo ? this.$store.state.userInfo.userId : null,
        createList:[],  //创建的歌单
        subList:[],     //收藏的歌单
        createVisible:false,  //创建歌单的小三角形是否隐藏
        subVisible:false,  //收藏歌单的小三角形是否隐藏
      }
    },
    created() {
      this.getUserPlayList(this.userId)
      // this.getUserLikeList(this.userId)
    },
    watch:{
      '$store.state.userInfo':{
        handler(){
          this.userId = this.$store.state.userInfo ? this.$store.state.userInfo.userId : null
          if(this.userId){
            this.getUserPlayList(this.userId)
          }else {
            this.createVisible = true
            this.subVisible = true
          }
        },
        immediate:true
      },
    },
    methods:{
      //点击'创建''收藏'的歌单展开或者隐藏内容
      creatListClick(){
        this.createVisible = !this.createVisible
      },
      subListClick(){
        this.subVisible = !this.subVisible
      },
      //点击'我的收藏'按钮
      enterClick(){
        if (!this.userId) {
          this.$message.error("只有登录后才能进入这个页面哦!");
          this.$router.replace("/home");
        }
      },

      //获取用户的歌单
      getUserPlayList(id){
        if (this.userId){
          home.getUserPlayList(id).then(res => {
            //对数据进行分类
            res = res.data.playlist
            let index = res.findIndex(item => item.subscribed === true)
            this.createList = res.slice(0, index)
            this.subList = res.slice(index)
          })
        }
      },
      //获取用户喜欢的音乐
      // getUserLikeList(id){
      //   // if(this.userId !== null) {
      //     home.getUserLikeList(id).then(res => {
      //       // console.log(res);
      //     })
      //   // }
      // },
    },
    //

  }
</script>

<style scoped>
  .sidebar{
    position: fixed;
    top: 44px;
    width: 137px;
    height: 87vh;
    overflow-y: scroll;
    font-size: 13px;
    border-right: 1px solid #d4c8c8;
  }
  .sidebar::-webkit-scrollbar {
    display: none;
  }
  /*歌单标题的小三角形*/
  .bottom_tri{
    border: 4px solid transparent;
    border-top: 4px solid #bfbfd0;
    position: absolute;
    left: 74px;
    top: 5px;
  }
  .right_tri{
    border: 4px solid transparent;
    border-left: 4px solid #c3c3dc;
    position: absolute;
    left: 77px;
    top: 2px;
  }
</style>
